<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from 'echarts';


export default {
  name: "visualMap",
  mounted () {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom, 'dark');
    var option;

    option = {
      title: {
        text: "假数据",
        subtext: "本文纯属虚构,请勿横加阻拦",
        left: "center",
        top: "center",
        textStyle: {
          fontSize: 30
        },
        subtextStyle: {
          fontSize: 20
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        nameTextStyle: {
          fontStyle: "italic"
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }
      ]
    };

    option && myChart.setOption(option);
  }
}
</script>

<style scoped>
#main {
  width: 600px;
  height: 400px;
}
</style>